<template>
	<view class="student-info">
		<view class="info-top">
			<view class="info-title">
				{{showType == 'single'? showInfo.courseName : showInfo.name}}
			</view>
			<view class="info-top-box">
				<view class="top-box-one"></view>
				<view class="top-box-two"></view>
				<view class="top-box-thr">
					<PointTitle :title="`${showInfo.studentName}成绩单`">
					</PointTitle>
					<view class="info-detail">
						<view class="detail-item">
							<view class="detail-item-title">
								{{showType == 'single' ? info.courseName :'总分'}}{{showInfo.useLevelFlag ? '' : `/${showInfo.fullScore}分`}}
							</view>
							<view
								:class="['detail-item-value red', !showInfo.result && showType != 'single' ? 'empty' : '']">
								{{showInfo.result}}<text>{{
									showInfo.useLevelFlag 
									 ? showType == 'single'
									   ? showInfo.result ? ' ' : '未录入' 
										 :  showInfo.result ? ' ' : '- ' 
									: showType == 'single'
									   ? showInfo.result ? ' ' : '未录入' 
										 :  showInfo.result ? ' ' : '- ' 
								}}</text>
							</view>
						</view>
						<view class="detail-item">
							<view class="detail-item-title">
								年级排名
							</view>
							<view class="detail-item-value origin">
								{{showInfo.gradeRank == 0 ? '-' : showInfo.gradeRank}}
							</view>
						</view>

						<view class="detail-item">
							<view class="detail-item-title">
								班级排名
							</view>
							<view class="detail-item-value blue">
								{{showInfo.classRank == 0 ? '-' : showInfo.classRank}}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="info-main">
			<view class="single-course white-box" v-if="showType == 'single'">
				<PointTitle :title="`成绩/科目备注`"></PointTitle>
				<view style="padding-top: 24rpx;"
					v-if="info.resultRemark || info.classCourseRemark || info.gradeCourseRemark">
					<view class="gray-box" v-show="info.resultRemark">
						<view class="info-box-title">
							<view class="info-title-icon result"></view>
							成绩备注
						</view>
						{{info.resultRemark}}
					</view>
					<view class="gray-box" v-show="info.classCourseRemark">
						<view class="info-box-title">
							<view class="info-title-icon course"></view>
							班级科目备注
						</view>
						{{info.classCourseRemark}}
					</view>

					<view class="gray-box" v-show="info.gradeCourseRemark">
						<view class="info-box-title">
							<view class="info-title-icon course"></view>
							年级科目备注
						</view>
						{{info.gradeCourseRemark}}
					</view>
				</view>
				<view class="no-remark"
					v-if="!info.resultRemark && !info.classCourseRemark && !info.gradeCourseRemark">
					<view class="empty-icon"></view>
					<view class="empty-text ">暂无备注~~</view>
				</view>
			</view>
			<view class="show-all-button" @click="changeShowType"
				v-if="showType == 'single' && showInfo.scope == 'grade' && showInfo.hasOther">
				查看本次其他科目成绩
			</view>

			<view class="all-course" v-if="showType == 'all'">
				<view class="white-box">
					<PointTitle :title="`科目成绩`"></PointTitle>
					<view class="course-list">
						<view class="gray-box course-item"
							v-for="item in  allInfo.resultList"
							@click="showSingleInfo(item)"
							:key="item.courseName">
							<view class="course-item-result">
								{{item.result}}{{item.useLevelFlag ? '' : item.result ? '分' : '未录入'}}
							</view>
							<view class="course-item-full">
								<text>{{item.courseName}}{{item.useLevelFlag ?  '' : `/${item.fullScore}分`}}</text>
								<u-icon name="arrow-right" color="#999"
									size="13"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="white-box">
					<PointTitle :title="`考试备注`"></PointTitle>
					<view class="gray-box course-remark">
						{{allInfo.examRemark ? allInfo.examRemark  : '暂无备注~~'}}
					</view>
					<PointTitle :title="`学生评语`"></PointTitle>
					<view class="gray-box course-remark">
						{{allInfo.studentRemark ? allInfo.studentRemark  : '暂无评语~~'}}
					</view>
				</view>
			</view>
		</view>

		<view class="go-analysis" @click="goAnslysis"></view>
	</view>
</template>

<script>
	import PointTitle from '@/pages/achievement/components/PointTitle.vue'

	import {
		studentSingle,
		studentGradeResult
	} from '@/pages/achievement/api/student.js'

	export default {
		components: {
			PointTitle
		},
		data() {
			return {
				studentResultId: "",
				info: {
					typeName: '',
					result: '',
					gradeRank: '',
					classRank: '',
				},
				allInfo: {
					result: '',
					gradeRank: '',
					classRank: '',
				},
				showType: 'single', // 默认查看单科成绩
			}
		},
		onLoad(options) {
			if (options?.studentResultId) {
				this.studentResultId = options.studentResultId
				this.getInfo()
				// this.getJobDetailStudentLists(options.jobId)
			}
		},
		computed: {
			showInfo() {
				return this.showType == 'single' ? this.info : this.allInfo
			}
		},
		methods: {
			async getInfo() {
				if (this.info.studentResultId == this.studentResultId) return
				const { data } = await studentSingle(this.studentResultId)
				console.log(data)
				this.info = data
			},
			async getAllInfo() {
				if (this.allInfo.studentName) return
				const { data } = await studentGradeResult(this.info
					.examStudentId)
				console.log(data)
				this.allInfo = data
			},
			//  单科查看所有科目
			async changeShowType() {
				await this.getAllInfo()
				this.showType = 'all'
			},
			// 查看单科
			async showSingleInfo(info) {
				this.studentResultId = info.studentResultId
				await this.getInfo()
				this.showType = 'single'
			},
			goAnslysis() {
				console.log(this.showType)
				if (this.showType == 'single') {
					uni.navigateTo({
						url: `/pages/achievement/pages/student/analysis?studentResultId=${this.studentResultId}&name=${this.info.name}&type=single&courseName=${this.info.courseName}`
					})
				} else if (this.showType == 'all') {
					uni.navigateTo({
						url: `/pages/achievement/pages/student/analysis?examStudentId=${this.info.examStudentId}&name=${this.allInfo.name}&type=all`
					})
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.student-info {
		height: 100vh;
		background: #f2f4f9;
		overflow-y: scroll;
	}

	.info-top {
		height: 388rpx;
		background-color: #4174FD;
		border-radius: 0rpx 0rpx 32rpx 32rpx;
	}

	.info-title {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.info-top-box {
		position: relative;
		height: 280rpx;
		margin: 0 30rpx;
		box-sizing: border-box;
	}

	.top-box-one {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 232rpx;
		background: #6e95fd;
		border-radius: 32rpx 32rpx 0 0;
	}

	.top-box-two {
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 0;
		z-index: 1;
		height: 256rpx;
		background: #a8bffd;
		border-radius: 32rpx 32rpx 0 0;
	}

	.top-box-thr {
		position: absolute;
		left: 48rpx;
		right: 48rpx;
		bottom: 0;
		z-index: 2;
		height: 280rpx;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 24rpx 0 48rpx 0;
		box-sizing: border-box;
	}

	.info-detail {
		margin: 48rpx 0 0 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.detail-item {

		width: 198rpx;
		text-align: center;


		.detail-item-title {
			font-size: 26rpx;
			color: #999;
			height: 36rpx;
			line-height: 36rpx;
			margin-bottom: 8rpx;
		}

		.detail-item-value {
			height: 66rpx;
			line-height: 66rpx;
			font-size: 48rpx;
			font-weight: 600;

			text {
				font-size: 26rpx;
			}
		}

		.empty {
			text {
				font-size: 48rpx;
				font-weight: 600;
			}
		}

		.red {
			color: #FE4F54;
		}

		.origin {
			color: #FF8948;
		}

		.blue {
			color: #4174FD;
		}
	}

	.info-main {
		box-sizing: border-box;
		padding: 24rpx 30rpx 0 30rpx;
	}

	.no-remark {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 80rpx 0 20rpx;
	}

	.empty-icon {
		width: 360rpx;
		height: 300rpx;
		background: url("@/pages/achievement/static/img/no-remark.jpg") 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.empty-text {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}

	.show-all-button {
		width: 396rpx;
		height: 72rpx;
		background: #4174fd;
		border-radius: 36rpx;
		margin: 80rpx auto 0;
		color: #fff;
		font-size: 30rpx;
		line-height: 72rpx;
		text-align: center;
	}

	.info-box-title {
		height: 42rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 16rpx;

		.info-title-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 16rpx;
		}

		.result {
			background: url("@/pages/achievement/static/img/chengji.jpg") 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.course {
			background: url("@/pages/achievement/static/img/course.jpg") 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}

	.course-list {
		margin-top: 48rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.course-item {
			box-sizing: border-box;
			width: 308rpx;
			height: 142rpx;
			margin-bottom: 10rpx;
			margin-top: 0;

		}

		.course-item:nth-child(odd) {
			margin-right: 10rpx;

		}

		.course-item-result {
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 42rpx;
			margin-bottom: 16rpx;
		}

		.course-item-full {
			display: flex;
			justify-content: space-between;
			height: 36rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.white-box {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}

	.gray-box {
		background: #f2f4fa;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
		margin: 24rpx 0 36rpx 0;
	}

	.go-analysis {
		width: 218rpx;
		height: 92rpx;
		background: url("@/pages/achievement/static/img/fenxi.png") 0 0 no-repeat;
		background-size: 100% 100%;
		position: fixed;
		right: 24rpx;
		bottom: 200rpx;

	}
</style>
